<template>
<div class="stockOpe">
  <div class="header">
    <span class="line"></span>
    <div class="text">股票操作</div>
    <span class="line"></span>
  </div>
  <div class="stockContent" v-if='isExhibition'>
    <div class="stockCharts">
      <div ref="mChartLeft" style="width:50%;height:160px" class="fl">
      </div>
      <div ref="mChartRight" style="width:50%;height:160px" class="fl">
      </div>
    </div>
    <div class="describe">
      <div class="left">超过<span v-text='positionIndex'></span>股民</div>
      <div class="right">超过<span v-text='retracementMaxIndex'></span>股民</div>
    </div>
  </div>
  <return-empty v-if='isEmpty'></return-empty>
  <return-error v-if='isError'></return-error>
</div>
</template>
<script>
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/tooltip'
import RemoteDAO from '@/common/remoteDAO'
import constant from '@/common/constant'

export default {
  props: ['fathertime'],
  data() {
    return {
      positionAvg: '',
      retracementMax: '',
      positionIndex: '',
      retracementMaxIndex: '',
      myChartLeft: '',
      myChartRight: '',
      timeIn: '',
      isEmpty: '',
      isError: '',
      isExhibition: 'true'
    }
  },
  mounted() {
    this.initStock();
  },
  beforDestroy() {
    echarts.dispose(this.myChartLeft)
    echarts.dispose(this.myChartRight)
  },
  watch: {
    fathertime: function() {
      this.initStock();
    }
  },
  methods: {
    error() {
      this.isError = 'true'
      this.isEmpty = ''
      this.isExhibition = ''
    },
    empty() {
      this.isEmpty = 'true'
      this.isError = ''
      this.isExhibition = ''
    },
    exhibition() {
      this.isEmpty = ''
      this.isError = ''
      this.isExhibition = 'true'
    },
    renderChart() {
      if (!this.myChartLeft && !this.myChartRight) {
        this.myChartLeft = echarts.init(this.$refs.mChartLeft);
        this.myChartRight = echarts.init(this.$refs.mChartRight);

        this.myChartLeft.setOption({
          tooltip: {
            show: false,
            trigger: 'axis',
            showContent: false
          },
          calculable: false,
          color: ['#ddd', '#ff7c00'],
          series: [{
            type: 'pie',
            radius: ['70%', '75%'],
            clockwise: false,
            label: {
              normal: {
                show: true,
                position: 'center',
                textStyle: {
                  fontSize: 20
                }
              },
              silent: true
            },
            data: [{
                value: 100 - this.positionAvg,
                name: '平均仓位'
              },
              {
                value: this.positionAvg,
                name: this.positionAvg + '%'
              }
            ]
          }]
        });

        this.myChartRight.setOption({
          tooltip: {
            show: false,
            trigger: 'axis',
            showContent: false
          },
          calculable: false,
          color: ['#ddd', '#ff7c00'],
          series: [{
            type: 'pie',
            radius: ['70%', '75%'],
            clockwise: false,
            label: {
              normal: {
                show: true,
                position: 'center',
                textStyle: {
                  fontSize: 20
                }
              },
              silent: true
            },
            data: [{
                value: 100 - this.retracementMax,
                name: '最大回撤'
              },
              {
                value: this.retracementMax,
                name: this.retracementMax + '%'
              }
            ]
          }]
        })
      } else {
        this.myChartLeft.setOption({
          series: [{
            data: [{
                value: 100 - this.positionAvg,
                name: '平均仓位'
              },
              {
                value: this.positionAvg,
                name: this.positionAvg + '%'
              }
            ]
          }]
        });
        this.myChartRight.setOption({
          series: [{
            data: [{
                value: 100 - this.retracementMax,
                name: '最大回撤'
              },
              {
                value: this.retracementMax,
                name: this.retracementMax + '%'
              }
            ]
          }]
        })
      }
    },
    initStock() {
      this.timeIn = constant.TimeTabData[this.fathertime];
      RemoteDAO.callZL13100043({
        "recent": this.timeIn.name
      }, this.ZL13100043);
    },
    ZL13100043(result) {
      if (result.error == '1') {
        this.error()
      } else {
        let data = result.data;
        let bigdata = JSON.parse(data).body[0].bigdata;
        let empty = JSON.parse(bigdata).hits.hits;
        if (empty.length == 0) {
          this.empty()
        } else {
          let specData = JSON.parse(bigdata).hits.hits[0]._source;
          this.exhibition()
          this.positionAvg = specData.position_avg;
          this.retracementMax = specData.retracement_max;
          this.positionIndex = specData.position_index + '%';
          this.retracementMaxIndex = specData.retracement_max_index + '%';

          this.renderChart();
        }
      }
    }
  }
}
</script>
<style scoped>
.stockOpe{
  padding-bottom: 0.35rem;
}
.stockContent {
  text-align: center;
  font-size: 0.12rem;
  overflow: hidden;
}

.describe {
  font-size: 0.1rem;
  margin-bottom: 0.35rem;
  color: #999;
}

.describe div {
  width: 50%;
  float: left;
}
</style>
